<template>
<div class="page-container-padding">
  <div>
    <el-select filterable v-model="currentAnalyst" size="mini">
      <el-option v-for="u in analystList" :value="u.id" :label="u.admin_name" :key="u.id"></el-option>
    </el-select>
    <span style="margin-left:6px;"><el-date-picker style="width:220px;" size="mini" type="daterange" v-model="addDateRange"></el-date-picker></span>
    <span style="margin-left:6px;"><el-button type="primary" size="mini" @click="toAddGrouper">加入小组</el-button></span>
  </div>
  <div style="margin-top:10px;">
    <el-select v-model="currentGroup" size="mini">
      <el-option value="G01" label="宏观金融"></el-option>
      <el-option value="G02" label="金属小组"></el-option>
      <el-option value="G03" label="能化小组"></el-option>
      <el-option value="G04" label="农产品组"></el-option>
    </el-select>
    <span style="margin-left:6px;"><el-date-picker style="width:150px;" v-model="currentDate" size="mini" :clearable="false"></el-date-picker></span>
    <span style="margin-left:6px;"><el-button type="primary" size="mini" @click="toQueryGrouper">查询</el-button></span>
  </div>
  <div style="margin-top:10px;">
    <el-table border stripe :data="userList">
      <el-table-column prop="admin_name" label="姓名" width="110px"></el-table-column>
      <el-table-column prop="group_name" label="小组" width="130px"></el-table-column>
      <el-table-column prop="leader_zh" label="组长" width="130px" align="center">
        <template slot-scope="scope">
          <el-switch size="mini" v-model="scope.row.is_leader" @change="leaderSwitchChange(scope.row)" :active-value="1" :inactive-value="0"></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="start_date" label="开始日期" width="130px"></el-table-column>
      <el-table-column prop="end_date" label="结束日期" width="130px"></el-table-column>
    </el-table>
  </div>
</div>
</template>

<script>
import { datetimeToStr, parseIntegerTime } from '@/utils/datetimeUtils'
import { getAnalystList } from '@/api/user'
import { addUserExtend, getUserExtend } from '@/api/departmentWork/workSetting'
export default {
  data(){
    return {
      currentAnalyst: null,
      addDateRange: [new Date(), new Date(2099,11,31)],
      analystList: [],

      currentGroup: 'G01',
      currentDate: new Date(),
      userList: []
    }
  },
  mounted() {
    getAnalystList().then(res => {
      this.analystList = res.data
    })
    this.toQueryGrouper()
  },
  methods:{
    toQueryGrouper(){
        const prm = {
          group: this.currentGroup,
          end: datetimeToStr(this.currentDate, true, ''),
        }
      getUserExtend(prm).then(res => {
        this.userList = res.data
      })

    },

    getUsername(uid){
      if (!uid){return ''}
      let username = ''
      for (let i=0;i<this.analystList.length;i++){
        if (this.analystList[i].id === uid){
          username = this.analystList[i].admin_name
          break
        }
      }
      return username
    },

    // 添加成员
    toAddGrouper(){
      let adminName = this.getUsername(this.currentAnalyst)
      if(!adminName){
        this.$baseMessage('请先选择人员!', 'error')
        return
      }
      const groupData = {
        user_id: this.currentAnalyst,
        admin_name: adminName,
        group_en: this.currentGroup,
        is_leader: 0,
        start_date: datetimeToStr(this.addDateRange[0], true, '-'),
        end_date: datetimeToStr(this.addDateRange[1], true, '-')
      }
      addUserExtend(groupData).then(res => {
        this.$baseMessage(res.msg, res.code===200?'success':'error')
        this.currentAnalyst = null
      })
    },

    // 组长选项改变
    leaderSwitchChange(row){
      const saveData = {
        user_id: row.user_id,
        admin_name: row.admin_name,
        group_en: row.group_en,
        is_leader: row.is_leader,
        start_date: datetimeToStr(parseIntegerTime(row.start_date), true, '-'),
        end_date: datetimeToStr(parseIntegerTime(row.end_date), true, '-')
      }
      // 这里使用添加的即可，后端判断更新还是新增
      addUserExtend(saveData).then(res => {
        this.$baseMessage(res.msg, res.code===200?'success':'error')
        if (res.code !== 200){
          row.is_leader = !row.is_leader
        }
      })
    }
  }

}
</script>

<style>
</style>
